<!DOCTYPE HTML>
<html>
<head>

    <title>Bootstrap</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <script>

        $(function () {

        });
    </script>
    <style>

        body {
            background-color: #F9F9F5;
        }

        .themed-grid-col {
            padding-top: 15px;
            padding-bottom: 15px;
        / / background-color: rgba(86, 61, 124, .15);
        / / border: 1 px solid rgba(86, 61, 124, .2);
        }

        .card {

        }

        .card-header {
        / / padding-top: 2 px;
        / / padding-bottom: 2 px;
        }

        .col-form-label {
            padding-right: 0px;

        }

        .form-control-sm {
        / / border: .5 px solid rgba(86, 61, 124, .2);

        }

    </style>
</head>
<body>
<div class="container" style="font-size:14px;">
    <div class="row ">
        <div class="col-md-3 themed-grid-col">
            <div class="card">
                <div class="card-header"></div>
                <div class="card-body">
                    <form>
                        <div class="form-group row">
                            <label for="exampleInputEmail0" class="col-sm-3 col-form-label">编码</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control form-control-sm" id="exampleInputEmail0"
                                       placeholder=""/>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="exampleInputPassword1" class="col-sm-3 col-form-label">名称</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control form-control-sm"
                                       id="exampleInputPassword1"
                                       placeholder=""/>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="exampleInputPassword2" class="col-sm-3 col-form-label">描述</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control form-control-sm"
                                       id="exampleInputPassword2"
                                       placeholder=""/>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="exampleInputPassword1" class="col-sm-3 col-form-label">类型</label>
                            <div class="col-sm-9">
                                <select class="form-control form-control-sm" id="sel2">
                                    <option>用户级</option>
                                    <option>程序级</option>
                                </select>
                            </div>
                        </div>

                    </form>
                    <div class="btn-group btn-block">
                        <button type="button" class="btn btn-primary btn-sm">查询</button>
                    </div>
                    <table class="table table-borderless table-hover table-sm" style="font-size: 10px">
                        <thead>
                        <tr>
                            <th scope="col">编码</th>
                            <th scope="col">描述</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>Mark</td>
                            <td>Otto</td>
                        </tr>
                        <tr>
                            <td>Mark</td>
                            <td>Otto</td>
                        </tr>

                        </tbody>
                    </table>
                </div>


            </div>

        </div><!-- end left -->

        <div class="col-md-9 themed-grid-col" style="font-size:14px; ">
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link " data-toggle="tab" href="#home">基本信息</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#menu1">参数值</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <div id="home" class="container tab-pane fade pl-0">
                            <div class="card">
                                <div class="card-body">
                                    <form>
                                        <div class="form-row">
                                            <div class="form-group col-md-4">
                                                <label for="inputEmail4">编码</label>
                                                <input type="email" class="form-control form-control-sm"
                                                       id="inputEmail4"
                                                       placeholder=""/></div>
                                            <div class="form-group col-md-4">
                                                <label for="inputPassword4">标准编码</label>
                                                <input type="password" class="form-control form-control-sm"
                                                       id="inputPassword4"
                                                       placeholder=""/></div>

                                            <div class="form-group col-md-3">
                                                <label for="inputEmail4">安全控制</label>
                                                <select class="form-control form-control-sm" id="sel1">
                                                    <option>不可读</option>
                                                    <option>可读</option>
                                                    <option>可读可增</option>
                                                    <option>可读增删</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-4">
                                                <label for="inputEmail4">名称</label>
                                                <input type="email" class="form-control form-control-sm"
                                                       id="inputEmail5"
                                                       placeholder=""/></div>
                                            <div class="form-group col-md-4">
                                                <label for="inputPassword4">本地名称</label>
                                                <input type="password" class="form-control form-control-sm"
                                                       id="inputPasswor1d4"
                                                       placeholder=""/></div>

                                            <div class="form-group col-md-3">
                                                <label for="inputPassword4">排序类型</label>
                                                <select class="form-control form-control-sm" id="se1l1">
                                                    <option>编码</option>
                                                    <option>描述</option>
                                                </select></div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-4">
                                                <label for="inputEmail4">描述</label>
                                                <input type="email" class="form-control form-control-sm"
                                                       id="inputEmail6"
                                                       placeholder=""/></div>
                                            <div class="form-group col-md-4">
                                                <label for="inputPassword4">扩展描述</label>
                                                <input type="password" class="form-control form-control-sm"
                                                       id="inputPassword5"
                                                       placeholder=""/></div>

                                            <div class="form-group col-md-3">
                                                <label for="inputEmail4">用户操作类型</label>
                                                <select class="form-control form-control-sm" id="sel11">
                                                    <option>用户级</option>
                                                    <option>程序级</option>
                                                </select></div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-4">
                                                <div class="custom-control custom-switch">
                                                    <input type="checkbox" class="custom-control-input"
                                                           id="customSwitch1">
                                                    <label class="custom-control-label"
                                                           for="customSwitch1">是否自动更新缓存</label>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-4">
                                                <div class="custom-control custom-switch">

                                                    <input type="checkbox" class="custom-control-input"
                                                           id="customSwitch2">
                                                    <label class="custom-control-label"
                                                           for="customSwitch2">下拉框中显示编码</label>
                                                </div>
                                            </div>


                                        </div>
                                        <div class="form-row form-inline">
                                            <label>有效期间</label>
                                            <div class="input-group  input-group-sm col-md-6">

                                                <input type="date" aria-label="startDate" class="form-control">
                                                <input type="date" aria-label="endDate" class="form-control">
                                            </div>
                                        </div>
                                    </form>

                                    <hr/>
                                    <h5>属性定义</h5>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                                data-target="#myModal2">新建
                                        </button>
                                        <button type="button" class="btn btn-primary btn-sm">删除</button>
                                    </div>
                                    <table class="table table-sm table-bordered table-hover mb-0">
                                        <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">编码</th>
                                            <th scope="col">名称</th>
                                            <th scope="col">描述</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <th scope="row">1</th>
                                            <td>Mark</td>
                                            <td>Otto</td>
                                            <td>@mdo</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">2</th>
                                            <td>@mdo</td>
                                            <td>Mark</td>
                                            <td>Otto</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">3</th>
                                            <td>@mdo</td>
                                            <td>Mark</td>
                                            <td>Otto</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                        <div id="menu1" class="container tab-pane active  pl-0">
                            <div class="card">
                                <div class="card-body">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                                data-target="#myModal">新建
                                        </button>
                                        <button type="button" class="btn btn-primary btn-sm">删除</button>
                                    </div>
                                    <table class="table table-sm table-bordered table-hover mb-0">
                                        <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">编码</th>
                                            <th scope="col">名称</th>
                                            <th scope="col">描述</th>
                                            <th scope="col">标准编码</th>
                                            <th scope="col">详情</th>
                                            <th scope="col">属性定义</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <th scope="row">1</th>
                                            <td>Mark</td>
                                            <td>Otto</td>
                                            <td>@mdo</td>
                                            <td>Mark</td>
                                            <td>Otto</td>
                                            <td>@mdo</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">2</th>
                                            <td>Mark</td>
                                            <td>Otto</td>
                                            <td>@mdo</td>
                                            <td>Mark</td>
                                            <td>Otto</td>
                                            <td>@mdo</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">3</th>
                                            <td>Mark</td>
                                            <td>Otto</td>
                                            <td>@mdo</td>
                                            <td>Mark</td>
                                            <td>Otto</td>
                                            <td>@mdo</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- end right -->


    </div><!-- end row -->


    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框主体 -->
                <div class="modal-body pt-0 pb-0 pl-0 pr-0">
                    <div class="card border border-0">
                        <div class="card-header border border-0">
                            <button type="button" class="close" data-dismiss="modal">x</button>
                        </div>
                        <div class="card-body">
                            <form>
                                <div class="form-group row">
                                    <label for="inputEmail3" class="col-sm-2 col-form-label">编码</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control form-control-sm" id="inputEmail3"
                                               placeholder=""/>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputPassword3" class="col-sm-2 col-form-label">名称</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control form-control-sm" id="inputPassword3"
                                               placeholder=""/>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputPassword3" class="col-sm-2 col-form-label">描述</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control form-control-sm" id="inputPassword3"
                                               placeholder=""/>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputPassword3" class="col-sm-2 col-form-label">标准编码</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control form-control-sm" id="inputPassword3"
                                               placeholder=""/>
                                    </div>
                                </div>
                                <div class="form-group row">

                                    <button type="button" class="btn btn-primary btn-sm btn-block">确认</button>


                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- end modal -->

    <div class="modal fade" id="myModal2">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框主体 -->
                <div class="modal-body pt-0 pb-0 pl-0 pr-0">
                    <div class="card border border-0">
                        <div class="card-header border border-0">
                            <button type="button" class="close" data-dismiss="modal">x</button>
                        </div>
                        <div class="card-body">
                            <form>
                                <div class="form-group row">
                                    <label for="inputEmail3" class="col-sm-2 col-form-label">编码</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control form-control-sm" id="inputEmail3"
                                               placeholder="Email"/>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputPassword3" class="col-sm-2 col-form-label">名称</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control form-control-sm" id="inputPassword3"
                                               placeholder=""/>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputPassword3" class="col-sm-2 col-form-label">描述</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control form-control-sm" id="inputPassword3"
                                               placeholder=""/>
                                    </div>
                                </div>
                                <div class="form-group row">

                                    <label for="inputPassword3" class="col-sm-2 col-form-label">数据类型</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control form-control-sm" id="inputPassword3"
                                               placeholder=""/>
                                    </div>

                                    <label for="inputPassword3" class="col-sm-2 col-form-label">缺省值</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control form-control-sm" id="inputPassword3"
                                               placeholder=""/>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputPassword3" class="col-sm-2 col-form-label">格式</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control form-control-sm" id="inputPassword3"
                                               placeholder=""/>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputPassword3" class="col-sm-2 col-form-label">是否固定</label>
                                    <div class="col-sm-10">
                                        <div class="radio radio-inline">
                                            <label class="col-form-label"><input type="radio" name="optradio"> 是
                                            </label>
                                            <label class="col-form-label"><input type="radio" name="optradio"> 否
                                            </label>
                                        </div>

                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputPassword3" class="col-sm-2 col-form-label">最小值</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control form-control-sm" id="inputPassword3"
                                               placeholder=""/>
                                    </div>

                                    <label for="inputPassword3" class="col-sm-2 col-form-label">最大值</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control form-control-sm" id="inputPassword3"
                                               placeholder=""/>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputPassword3" class="col-sm-2 col-form-label">允许的值</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control form-control-sm" id="inputPassword3"
                                               placeholder=""/>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputPassword3" class="col-sm-2 col-form-label">参数名称</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control form-control-sm" id="inputPassword3"
                                               placeholder=""/>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputPassword3" class="col-sm-2 col-form-label">是否可空</label>
                                    <div class="col-sm-10">
                                        <div class="radio radio-inline">
                                            <label class="col-form-label"><input type="radio" name="optradio"> 是
                                            </label>
                                            <label class="col-form-label"><input type="radio" name="optradio"> 否
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputPassword3" class="col-sm-3 col-form-label">是否允许变更</label>
                                    <div class="col-sm-9">
                                        <div class="radio radio-inline ">
                                            <label class="col-form-label"><input type="radio" name="optradio"> 是
                                            </label>
                                            <label class="col-form-label"><input type="radio" name="optradio"> 否
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">

                                    <button type="button" class="btn btn-primary btn-sm btn-block">保存</button>


                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div><!-- end modal -->


</div>

</body>
</html>
